<template >
  <div>
    <div class="page">
        <div  v-loading="load" class="container">
            <div class="left">
                <div class="login">登录</div>
                <div class="eula">欢迎使用！</div>
            </div>
            <div class="right">
                <svg viewBox="0 0 320 300">
            <defs>
            <linearGradient
                  inkscape:collect="always"
                  id="linearGradient"
                  x1="13"
                  y1="193.49992"
                  x2="307"
                  y2="193.49992"
                  gradientUnits="userSpaceOnUse">
                <stop
                    style="stop-color:#ff00ff;"
                    offset="0"
                    id="stop876" />
                <stop
                    style="stop-color:#ff0000;"
                    offset="1"
                    id="stop878" />
            </linearGradient>
            </defs>
            <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
        </svg>
                <div class="form">
                    <label for="email">用户名</label>
                    <input v-model="loginFrom.loginName" type="email" id="email">
                    <label for="password">密码</label>
                    <input v-model="loginFrom.password" type="password" id="password">
                    <!-- <el-button @click="submit" style="margin-top:20px;width: 100%;"> 登录</el-button> -->
                    <input type="submit" id="submit" @click="submit" value="登录">
                </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import anime from 'animejs'
import '../../node_modules/animejs/lib/anime.min.js'
export default {
  data () {
    return {
      load:false,
      loginFrom: {
        loginName: '',
        password: ''
      }
    }
  },
  methods: {
    submit () {
      this.load=true
      // debugger
      const formdata = new FormData()
      for (const a in this.loginFrom) {
        formdata.set(a, this.loginFrom[a])
      }
      this.$axios.post('login', formdata).then(res => {
        if (res.data.flag) {
          window.localStorage.setItem('Authorization', res.data.data)
          this.$axios.get('sysUser/getLoginUser').then(res =>{
            window.localStorage.setItem('userInfo',JSON.stringify(res.data.data))
      this.load=false

            this.$router.push('/home')
          })
        }else{
          this.$message(res.data.data)
        }
      this.load=false

      })
    }
  },
  
  mounted () {
    let current = null
    document.querySelector('#email').addEventListener('focus', function (e) {
      if (current) current.pause()
      current = anime({
        targets: 'path',
        strokeDashoffset: {
          value: 0,
          duration: 700,
          easing: 'easeOutQuart'
        },
        strokeDasharray: {
          value: '240 1386',
          duration: 700,
          easing: 'easeOutQuart'
        }
      })
    })
    document.querySelector('#password').addEventListener('focus', function (e) {
      if (current) current.pause()
      current = anime({
        targets: 'path',
        strokeDashoffset: {
          value: -336,
          duration: 700,
          easing: 'easeOutQuart'
        },
        strokeDasharray: {
          value: '240 1386',
          duration: 700,
          easing: 'easeOutQuart'
        }
      })
    })
    document.querySelector('#submit').addEventListener('focus', function (e) {
      if (current) current.pause()
      current = anime({
        targets: 'path',
        strokeDashoffset: {
          value: -730,
          duration: 700,
          easing: 'easeOutQuart'
        },
        strokeDasharray: {
          value: '530 1386',
          duration: 700,
          easing: 'easeOutQuart'
        }
      })
    })
  },
  created () {

  }
}
</script>

<style scoped>

    body {
    /* background: white; */

    font-family: 'Inter UI', sans-serif;
    margin: 0;
    padding: 20px;
    }
    .page {
    /* background: red; */
    background: linear-gradient(-105deg, #ee7752, #e73c7e, #23a6d5, #23d5ab,#8e43e7,#00ad45);
    background-size: 500% 500%;
    display: flex;
    flex-direction: column;
    height: calc(100%);
    position: absolute;
    place-content: center;
    width: calc(100%);
    animation: bbody 10s ease infinite;
    }
    @keyframes bbody{
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position : 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
    }
    /* @media (max-width: 767px) {
    .page {
        height: auto;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    } */

    .container {
    display: flex;
    height: 320px;
    margin: 0 auto;
    width: 640px;
    }
    @media (max-width: 767px) {
    .container {
        flex-direction: column;
        height: 630px;
        width: 320px;
    }
    }
    .left {
    /* background: white; */

    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* border: 1px solid rgba(255, 255, 255, 0.18); */
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    /* border-radius: 12px; */
    /* -webkit-border-radius: 12px; */
    color: rgba(255, 255, 255, 0.75);

    height: calc(100% - 40px);
    top: 20px;
    position: relative;
    width: 50%;
    }
    @media (max-width: 767px) {
    .left {
        height: 100%;
        left: 20px;
        width: calc(100% - 40px);
        max-height: 270px;
    }
    }
    .login {
    font-size: 50px;
    font-weight: 900;
    margin: 50px 40px 40px;
    }
    .eula {
      color: rgba(255, 255, 255, 0.75);
    /* color: #999; */
    font-size: 14px;
    line-height: 1.5;
    margin: 40px;
    }
    .right {
    background: #474A59;
    box-shadow: 0px 0px 40px 16px rgba(0,0,0,0.22);
    color: #F1F1F2;
    position: relative;
    width: 50%;
    }
    @media (max-width: 767px) {
    .right {
        flex-shrink: 0;
        height: 100%;
        width: 100%;
        max-height: 350px;
    }
    }
    svg {
    position: absolute;
    left: 0px;
    width: 320px;
    }
    path {
    fill: none;
    stroke: url(#linearGradient);;
    stroke-width: 4;
    stroke-dasharray: 240 1386;
    }
    .form {
        margin: 40px;
        position: absolute;
    }
    label {
        text-align: left;
        color:  #c2c2c5;
        display: block;
        font-size: 14px;
        height: 16px;
        margin-top: 20px;
        margin-bottom: 5px;
    }
    input {
        background: transparent;
        border: 0;
        color: #f2f2f2;
        font-size: 20px;
        height: 30px;
        line-height: 30px;
        outline: none !important;
        width: 100%;
    }
    input::-moz-focus-inner {
    border: 0;
    }
    #submit {
    color: #707075;
    margin-top: 40px;
    transition: color 300ms;
    }
    #submit:focus {
    color: #f2f2f2;
    }
    #submit:active {
    color: #d0d0d2;
    }
</style>
